<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div class="app">
        <div>
            <h1>电影</h1>
            <ul>
                <li v-for="film in film_list">
                    <h3>{{film.name}}</h3>
                    <img :src="film.poster" width="200px">
                </li>
            </ul>
        </div>

    </div>
    
</body>
<script>
    var vm = new Vue({
        el:".app",
        data:{

            film_list:[]
        },
        methods: {
            
        },
        created () {
            axios.get('http://localhost:8000/mz/').then(res=>{
                this.film_list = res.data.data.films
            }) 
        }
    })
</script>

</html>